<template>
    <div class="">
      <div class="sub-name name-box" id="low-name"><span>研发平台</span></div>
      <ul class="tech-office" id="kyjg">
        <li v-for="item in platform" :key="item.id">
          <div class="office-l">
            <img :src="item.img" alt="">
          </div>
          <div class="office-r">
            <p class="office-name">{{item.title}}</p>
            <p class="office-function" v-if="item.sub_content">{{item.sub_content}}</p>
            <p class="office-desc">{{item.content}}</p>
          </div>
        </li>
      </ul>
    </div>
</template>

<script>
  export default {
    name: 'platform',
    async asyncData({$axios}){
      const platform = await $axios.$get('http://tfngw.tfnhg.com/Api/New/get_yfpt');
      return {platform}
    }
  }
</script>

<style scoped>

  .tech-office{
    width: 100%;
  }
  .tech-office li{
    display: flex;
    flex-flow:row nowrap;
    align-items: flex-start;
    border-bottom: 1px solid #dededc;
    padding:0.15rem 0;
  }
  .office-l{
    width: 27%;
  }
  .office-l img{
    width: 98%;
  }
  .office-r{
    flex:1;
    padding-left:0.3rem;
  }
  .tech-office .office-name{
    font-size: 0.3rem;
    line-height: 0.36rem;
    margin: 0.15rem 0
  }
  .tech-office .office-function{
    padding:0.1rem 0;
    font-size: 0.18rem;
    line-height: 0.28rem;
    border-top:1px solid #dededc;
    border-bottom:1px solid #dededc;
  }
  .tech-office .office-desc{
    line-height: 0.22rem;
    margin: 0.15rem 0;
  }
</style>
